<template>
  <div class="card">
    <img src="https://picsum.photos/200/300?random=1">
  </div>
</template>
<script setup>

</script>
<style lang="scss" scoped>
.card {
  width: 200px;
  height: 300px;
  border: 1px solid #ccc;
  margin: 0 auto;
  position: relative;
  --sx: 20px;
  --sy: 20px;
}

.card::after {
  content: '';
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: blur(10px);
  background: conic-gradient(
          #ffd700,
          #f7fbff,
          #d6d6d6,
          #b1b1b1,
          #6f6f6f,
          #002941,
          #0071c1,
          #c7c7c7,
          #ff7373,
          #ff0000,
          #e60000,
          #a60000,
          #4d0000,
          #0000ff);
  clip-path: polygon(
          -100vmax -100vmax,
          100vmax -100vmax,
          100vmax 100vmax,
          -100vmax 100vmax,
          -100vmax -100vmax,
          calc(0px - var(--sx)) calc(0px - var(--sy)),
          calc(0px - var(--sx)) calc(100% - var(--sy)),
          calc(100% - var(--sx)) calc(100% - var(--sy)),
          calc(100% - var(--sx)) calc(0px - var(--sy)),
          calc(0px - var(--sx)) calc(0px - var(--sy))
  );
}
</style>